<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <!--导入vue脚本-->
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" width="1000px">
            <tr>
                <th>ID</th>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
                <th>类型</th>
                <th>照片</th>
                <th>操作</th>
            </tr>
            <tr v-for="student in students" v-on:click="showStudent(student)">
                <td>{{student.stuId}}</td>
                <td>{{student.stuNo}}</td>
                <td>{{student.stuName}}</td>
                <td>{{student.stuAge}}</td>
                <td>{{student.stuGender}}</td>
                <td>{{student.stuAddress}}</td>
                <td>{{student.studentType.typeName}}</td>
                <td>{{student.stuPicture}}</td>
                <td><button v-on:click="deleteStudent(student.stuId)">删除</button></td>
            </tr>
        </table>
        <button v-for="i in pages" v-on:click="loadStudents(i)">{{i}}</button>
        <hr>
        学号：<input type="text" v-model="student.stuNo"><br>
        姓名：<input type="text" v-model="student.stuName"><br>
        年龄：<input type="text" v-model="student.stuAge"><br>
        性别：<input type="text" v-model="student.stuGender"><br>
        地址：<input type="text" v-model="student.stuAddress"><br>
        类型：<input type="text" v-model="student.stuTypeId"><br>
        照片：<input type="text" v-model="student.stuPicture"><br>
        <button v-on:click="saveStudent">保存</button>
    </div>
    <script>
        new Vue({
           el: "#app",
           data:{
               students:null,   //学生集合
               current:1,       //当前页数
               size:5,          //分页长度
               pages:0,          //分页数量
               student:{        //当前学生
                   stuId:0,
                   stuNo:"",
                   stuName:"",
                   stuAge:"",
                   stuAddress:"",
                   stuGender:"",
                   stuTypeId:"",
                   stuPicture:""
               },
           },
            methods:{
                //分页查询
                loadStudents(current){
                    this.current = current;
                    //axios调用分页查询接口
                    axios.get("http://localhost:8080/students-page?current=" + this.current +"&size="+this.size)
                        .then(result => {  //请求成功的回调
                            console.log(result);
                            this.students = result.data.data.records;
                            this.pages = result.data.data.pages;
                        })
                },
                //删除
                deleteStudent(id){
                    axios.delete("http://localhost:8080/student/"+id)
                    .then(result =>{
                        console.log(result.data);
                        if(result.data.code == 200){
                            this.loadStudents(this.current);
                        }
                    });
                },
                //显示学生
                showStudent(student){
                    this.student = JSON.parse(JSON.stringify(student));
                },
                //保存学生
                saveStudent(){
                    //通过学生id是否是0，判断添加还是更新
                    if(this.student.stuId == 0){
                        //添加
                        axios.post("http://localhost:8080/student", this.student)
                        .then(result => {
                            console.log(result.data);
                            if(result.data.code == 200){
                                this.loadStudents(this.current);
                            }
                        })
                    }else{
                        //更新
                        axios.put("http://localhost:8080/student", this.student)
                            .then(result => {
                                console.log(result.data);
                                if(result.data.code == 200){
                                    this.loadStudents(this.current);
                                }
                            })
                    }
                    this.student = {
                        stuId:0,
                        stuNo:"",
                        stuName:"",
                        stuAge:"",
                        stuAddress:"",
                        stuGender:"",
                        stuTypeId:"",
                        stuPicture:""
                    };
                }
            },
            mounted(){  //挂载当前页面
               this.loadStudents(1);
            }
        });
    </script>
</body>
</html>
